<template>
	<view class="container">
		<view class="header">
			<view class="confirm-btn">
				<el-button disabled style="font-size: 16px; color: #f5f5f5;" link>
					无
				</el-button>
			</view>
			<view class="header-title">修改密码</view>
			<view class="confirm-btn">
				<el-button id="confirm-btn" @click="confirmSubmit" style="font-size: 16px; color: #c87a7a;" link>
					确认
				</el-button>
			</view>
		</view>

		<view class="ipt-area">
			<input type="password" v-model="currInput" placeholder="请输入新密码"></input>
			<input type="password" v-model="confirmInput" placeholder="请再次输入新密码"></input>
			<text class="remind">密码最少6位，
				必须包含大写字母、小写字母、数字、特殊字符。
				请勿使用与旧密码相同或者包含手机号/生日等易泄露信息的密码。
				建议定期更换密码，避免与其他平台密码共用。
			</text>
		</view>
	</view>
</template>

<script>
	import {
		updateUser
	} from '@/api/user';
	export default {
		data() {
			return {
				userInfo: {},
				currInput: '',
				confirmInput: ''
			}
		},

		onLoad() {
			this.getUserInfo();
		},

		mounted() {
			const newIpt = document.querySelectorAll("input")[0];
			const confirmIpt = document.querySelectorAll("input")[1];
			const confirmBtn = document.getElementById("confirm-btn");
			confirmIpt.addEventListener('input', () => {
				if (newIpt.value.trim() && confirmIpt.value.trim()) {
					confirmBtn.style.color = "#BD3124";
				} else {
					confirmBtn.style.color = "#c87a7a";
				}
			});
		},

		methods: {
			getUserInfo() {
				const storedUserInfo = uni.getStorageSync('userInfo');
				if (storedUserInfo) {
					this.userInfo = JSON.parse(storedUserInfo);
					this.currInput = storedUserInfo.password
				}
			},

			async confirmSubmit() {
				const confirmBtn = document.getElementById("confirm-btn");
				const newPwd = this.currInput.trim();
				const confirmPwd = this.confirmInput.trim();
				const oldPwd = this.userInfo.password;
				if (!newPwd || !confirmPwd) {
					return;
				}
				if (newPwd !== confirmPwd) {
					uni.showToast({
						title: '两次输入不一致！',
						icon: 'error',
						duration: 1500
					});
					return;
				}
				if (newPwd === oldPwd || confirmPwd === oldPwd) {
					uni.showToast({
						title: '新旧密码不能相同！',
						icon: 'error',
						duration: 1500
					});
					return;
				}
				//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
				const pwdPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
				const match = pwdPattern.test(newPwd);
				// 验证通过，提交信息
				if (!match) {
					uni.showToast({
						title: '请检查密码格式！',
						icon: 'error',
						duration: 1500
					});
					return;
				} else {
					const account = this.userInfo.account;
					const result = await updateUser({
						account,
						password: newPwd
					});
					if (result.code === 200) {
						this.userInfo.password = newPwd;
						uni.setStorageSync('userInfo', JSON.stringify(this.userInfo));
						uni.showToast({
							title: '密码修改成功！',
							duration: 1500
						});
						setTimeout(() => {
							uni.showToast({
								title: '请重新登录！',
								icon: 'error',
								duration: 2000
							});
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 2000);
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background-color: #F5F5F5;
	}

	.header {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 24px 0;
		font-size: 16px;
	}

	.header-title {
		color: #333;
	}

	.confirm-btn {
		margin: 0 16px;
	}

	.ipt-area {
		padding: 0 16px;
	}

	.ipt-area input {
		width: 90%;
		height: 56px;
		padding: 0 16px;
		border-radius: 16px;
		background-color: #fff;
	}

	input:first-child {
		margin-bottom: 12px;
	}

	input:nth-child(2) {
		margin-bottom: 8px;
	}

	input:hover {
		animation: fadeIn 0.5s ease forwards;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			border: none;
		}

		to {
			opacity: 1;
			border: 2px solid #D20000;
			box-shadow: 0 0 8px rgba(189, 49, 36, 0.3);
		}
	}

	.remind {
		color: #666;
		font-size: 12px;
	}
</style>